”WebページをRetina対応させるテクニック～基礎知識編” を ＠IT に寄稿しました
そんな訳で、＠IT で不定期連載中の jQuery x HTML5 x CSS3 をまじめに勉強 シリーズですが、第四回目を寄稿しました。
この連載は当ブログにおいてもシリーズ化している「HTML5 x CSS3 x jQueryをまじめに勉強してみる」の出張版という位置づけですが、解説文やサンプルコードを新たに書き起こすなど、増補改訂版として発信しております。
第四回目は、iPhone や Macbook Pro 等の製品に搭載されている Retina ディスプレイをはじめとした高精細ディスプレイで Web ページを最適に表示させるための知識について解説しています。
Retinaディスプレイとは、AppleがiPhone 4で初めて採用した独自の高精細ディスプレイの名称である。「Retina」とは英語で「網膜」を意味する。
Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから960×640ピクセルに、つまり4倍になっている。
1インチあたりの画素数（ppi）で示すと、初代のiPhoneからiPhone 3Gまでは163ppiだったのに対して、iPhone 4のRetinaディスプレイでは326ppiになっている。ppiは1インチ幅の中に敷き詰められている画素（ピクセル）の数を示す単位であり、ppiが163から326に倍増していることは、すなわち平方インチにして4倍の密度となっていることを意味する。Retinaディスプレイの画素1個の幅は78マイクロメートルであるといい、ほぼ肉眼では画素を認識できない水準になっている。
(参考: IT用語辞典バイナリ)
ちなみに今回は初めて ＠IT 用に新たに書き下ろしたモノでもあります。
